<template>
  <div class="layer gap-3 p-3">

    <div class="section" :class="selectIndex === 0 ? 'ring ring-orange-6' : ''" @click="selectIndex = 0">

      <div class="form-item-inline gap-4">
        <div class="p-3 bg-orange-5 rounded-lg shadow">
          <div class="icon-2xl i-mdi-currency-cny text-white"></div>
        </div>
        <div class="form-item gap-1">
          <div class="title drop-shadow">储值套餐</div>
          <div>允许用户预先充值一定金额，之后可以使用余额进行支付购买商品或服务</div>
          <div class="form-item-inline">
            <div class="icon-sm i-mdi-rhombus-medium"></div>
            <div class="title-sm">赠送金额</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">折扣</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">期限</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">优惠券</div>
          </div>
        </div>
      </div>

    </div>

    <div class="section" :class="selectIndex === 1 ? 'ring ring-sky-6' : ''" @click="selectIndex = 1">

      <div class="form-item-inline gap-4">
        <div class="p-3 bg-sky-5 rounded-lg shadow">
          <div class="icon-2xl i-mdi-currency-cny text-white"></div>
        </div>
        <div class="form-item gap-1">
          <div class="title drop-shadow">计次套餐</div>
          <div>允许用户购买指定服务以及相关次数。每次核销相关服务会记录使用次数，直到次数用尽为止</div>
          <div class="form-item-inline">
            <div class="icon-sm i-mdi-rhombus-medium"></div>
            <div class="title-sm">多种服务</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">赠送次数</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">期限</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">优惠券</div>
          </div>
        </div>
      </div>

    </div>

    <div class="section" :class="selectIndex === 2 ? 'ring ring-purple-6' : ''" @click="selectIndex = 2">

      <div class="form-item-inline gap-4">
        <div class="p-3 bg-purple-5 rounded-lg shadow">
          <div class="icon-2xl i-mdi-currency-cny text-white"></div>
        </div>
        <div class="form-item gap-1">
          <div class="title drop-shadow">计时套餐</div>
          <div>允许用户购买使用时间进行结算，在指定时间内享受服务</div>
          <div class="form-item-inline">
            <div class="icon-sm i-mdi-rhombus-medium"></div>
            <div class="title-sm">赠送期限</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">优惠券</div>
          </div>
        </div>
      </div>

    </div>

    <div class="section" :class="selectIndex === 3 ? 'ring ring-green-6' : ''" @click="selectIndex = 3">

      <div class="form-item-inline gap-4">
        <div class="p-3 bg-green-5 rounded-lg shadow">
          <div class="icon-2xl i-mdi-currency-cny text-white"></div>
        </div>
        <div class="form-item gap-1">
          <div class="title drop-shadow">组合套餐</div>
          <div>多种套餐类型进行组合，包含多种服务或商品的组合，用户可以一次性购买并享受这些服务或商品。为用户提供便利和优惠，同时帮助商家提高销售和客户忠诚度</div>
          <div class="form-item-inline">
            <div class="icon-sm i-mdi-rhombus-medium"></div>
            <div class="title-sm">灵活组合</div>
            <div class="title-sm desc">/</div>
            <div class="title-sm">优惠券</div>
          </div>
        </div>
      </div>

    </div>

    <!-- <div class="section" :class="selectIndex === 4 ? 'ring ring-gray-600' : ''" @click="selectIndex = 4">

      <div class="form-item-inline gap-4">
        <div class="p-3 bg-gray-5 rounded-lg shadow">
          <div class="icon-2xl i-mdi-credit-card-outline text-white"></div>
        </div>
        <div class="form-item gap-1">
          <div class="title drop-shadow">模板引入</div>
          <div>从已有的模板引入，快速生成套餐模板</div>
        </div>
      </div>

    </div> -->

    <div class="btn-primary w-full" disabled="selectIndex===-1" @click="goto(`./new?mode=${selectIndex}`)">创建</div>

  </div>
</template>

<script setup lang='ts'>
import { goto } from '@/utils';
import { ref } from 'vue';


const selectIndex = ref(0)

</script>

<style></style>